<template>
  <div class="cs-page-container">
    <div class="cs-filter-container" style="margin-bottom: 20px">
      <el-button
        class="filter-item"
        type="primary"
        @click="handleCreate"
      >新增弹窗</el-button>
      <el-button
        class="filter-item"
        type="primary"
        @click="DynamicSwitch"
      >修改动态开关</el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="DynamicList"
      :row-class-name="tableRowClassName"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column
        label="序号"
        width="70px"
      >
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="动态昵称"
        align="center"
        prop="nickname"
        width="100px"
      >
      </el-table-column>
      <el-table-column
        label="动态内容"
        align="center"
      >
        <template slot-scope="{ row }"><p v-html="row.content"></p></template>
      </el-table-column>
      <el-table-column
        label="评论数量"
        align="center"
        prop="commentNum"
        width="70px"
      >
      </el-table-column>
      <el-table-column
        label="发布时间"
        align="center"
      >
        <template slot-scope="{ row }">{{ row.createTimestamp | parseTime }}</template>
      </el-table-column>
      <el-table-column
        label="图片"
        align="center"
      >
        <template slot-scope="{row}">
          <ul class="photos-list">
            <li
              v-for="img in row.imageVos"
              :key="img.url"
              :class="{checked:img.checked}"
            >
              <image-tooltip :image-id="img.url">
                <img
                  slot="img"
                  :src="img.url"
                >
              </image-tooltip>
            </li>
          </ul>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="330"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button
            type="primary"
            size="mini"
            @click="getComment(row)"
          >评论详情</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleUpdate(row)"
          >修改</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDelete(row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="动态评论"
      :visible.sync="dynamicFormVisible"
      width="800px"
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :model="commentItem"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <div class="list-detail">
          <list :content-id="commentItem.row.contentId" :list="commentItem.commentVoList"></list>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="800px"
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <el-alert
          title="动态链接格式: <a href=&quot;www.baidu.com&quot;>这是链接</a>"
          type="info"
          :closable="false"
        >
        </el-alert>
        <el-form-item
          label="动态内容:"
        >
          <el-input
            v-model="temp.content"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 10}"
            placeholder="请输入内容"
          />
        </el-form-item>

        <el-form-item
          label="动态图片:"
        >
          <Upload
            :img="temp.imageVos"
            :is-size="true"
            :is-one="false"
            :max-img="9"
            @change="imageChange"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="createData"
        >确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="修改状态"
      :visible.sync="StatusFormVisible"
      width="800px"
      :destroy-on-close="true"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="100px"
        style="margin-left:50px;"
      >
        <el-form-item
          label="动态展示"
        >
          <el-select v-model="StatusForm.showFlag" filterable placeholder="是否展示这条动态">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="是否评论"
        >
          <el-select v-model="StatusForm.commentFlag" filterable placeholder="是否展示这条动态">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="动态昵称"
          prop="open"
        >
          <el-input
            v-model.trim="StatusForm.nickname"
            clearable
            placeholder="请输入动态昵称"
          />
        </el-form-item>
        <el-form-item
          label="动态昵称"
          prop="open"
        >
          <el-date-picker
            v-model="StatusForm.runTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="StatusFormVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="updateOfficialSwitch"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {
  getOfficialContent,
  updateOfficialContent,
  getOfficialComment,
  getOfficialSwitch,
  updateOfficialSwitch
} from '@/api/customSetting'
import Upload from '@/components/Upload/SingleImage'
import ImageViewer from '@/components/ImageViewer'
import List from '@/components/CommentList'

export default {
  name: 'OfficialDynamic',
  // eslint-disable-next-line vue/no-unused-components
  components: { Upload, ImageViewer, List },
  data() {
    return {
      tableKey: 0,
      DynamicList: [],
      listQuery: {
        appType: 0
      },
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新建'
      },
      commentItem: {
        row: {},
        commentVoList: []
      },
      dynamicFormVisible: false,
      dialogFormVisible: false,
      StatusFormVisible: false,
      rules: {
        // appType: [{ required: true, message: '必选项', trigger: 'blur' }],
        // title: [{ required: true, message: '必选项', trigger: 'blur' }],
        // cover: [{ required: true, message: '必选项', trigger: 'blur' }],
        // url: [{ required: true, message: '必选项', trigger: 'blur' }],
        // open: [{ required: true, message: '必选项', trigger: 'blur' }]
      },
      StatusForm: {
        'commentFlag': null,
        'nickname': null,
        'showFlag': null,
        'runTime': null
      },
      temp: {
        content: '',
        imageVos: [],
        type: 0
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'warning-row';
      }
      return '';
    },
    onCheckedPhoto(img) {
      img.checked = !img.checked
    },
    zoomImage(url) {
      this.showImage = true
      this.imageUrl = url
    },
    doSearch() {
      this.listLoading = true
      getOfficialContent(this.listQuery).then(response => {
        this.DynamicList = response.data
        this.listLoading = false
      })
    },
    showImage(url) {
      this.imageViewerVisible = true
      this.imageUrl = url
    },
    imageChange(fileList, type) {
      for (const temp in fileList) {
        fileList[temp].size = fileList[temp].size.toString()
      }
      this.temp.imageVos = fileList
      // }
    },
    resetTemp() {
      this.temp = {
        content: '',
        imageVos: [],
        type: 0
      }
    },
    createData() {
      console.log('创建')
      if (this.temp.imageVos.length > 0) {
        this.temp.type = 1
      } else {
        this.temp.imageVos = null
      }
      this.temp.content = this.disposeContentToHtml(this.temp.content)
      console.log(this.temp.content)
      this.$refs['dataForm'].validate(valid => {
        valid &&
        updateOfficialContent(this.temp).then(response => {
          this.doSearch()
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    disposeContentToHtml(text) {
      console.log(text)
      // 处理换行问题
      const reg = new RegExp('\n', 'g');
      text = text.replace(reg, '<br>');
      // const reg2 = new RegExp(' ', 'g');
      // text = text.replace(reg2, '&emsp;');
      return text
    },
    disposeHtmlToContent(text) {
      console.log(text)
      // 处理换行问题
      const reg = new RegExp('<br>', 'g');
      text = text.replace(reg, '\n');
      // const reg2 = new RegExp('&emsp;', 'g');
      // text = text.replace(reg2, ' ');
      return text
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleUpdate(row) {
      const content = this.disposeHtmlToContent(row.content)
      this.temp = {
        content: content,
        imageVos: row.imageVos ? row.imageVos : [],
        type: row.type,
        contentId: row.contentId
      }
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    getComment(row) {
      const data = {
        'contentId': row.contentId
      }
      getOfficialComment(data).then(response => {
        this.commentItem.row = row
        this.commentItem.commentVoList = response.data.commentVoList
        this.dynamicFormVisible = true
      })
    },
    handleDelete(row) {
      console.log('删除动态')
      updateOfficialContent({
        'contentId': row.contentId,
        'deleteFlag': true
      }).then(response => {
        this.doSearch()
        this.$message.success('删除成功')
        this.StatusFormVisible = false
      })
    },
    DynamicSwitch() {
      getOfficialSwitch().then(response => {
        this.StatusForm = response.data
        this.StatusForm['commentFlag'] = this.StatusForm.commentFlag ? 1 : 0
        this.StatusForm['showFlag'] = this.StatusForm.showFlag ? 1 : 0
      })
      this.StatusFormVisible = true
    },
    updateOfficialSwitch() {
      updateOfficialSwitch(this.StatusForm).then(response => {
        console.log('修改成功')
        this.$message.success('修改成功')
        this.StatusFormVisible = false
      })
    }
  }
}
</script>
<style lang="scss">
.photos-info {
  tr {
    background: none;
    td {
      border: none;
      padding: 5px;
      white-space: nowrap;
    }
  }
}
.el-table .warning-row {
  background: oldlace;
}
.photos-list {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 100px;
    height: 100px;
    margin: 5px;
    list-style: none;
    cursor: pointer;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .el-icon-check {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 40px;
      height: 40px;
      margin: auto;
      color: #fff;
      background: #67c23a;
      border-radius: 50%;
      font-size: 30px;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
